<h2 class="flex-row-space-between">{{'AUTH_CENTER' |translate}} / {{'CORS_DASHBOARD' |translate}}<button
    mat-fab color="primary" (click)="openBottomSheet()">{{'ADD'|translate}}</button></h2>
<app-search (search)="doSearch($event)" [searchConfigs]="searchConfigs">
</app-search>
<div style="display: flex;flex-direction: row;align-items: center;height: 56px;justify-content:end;">
    <app-table-column-config [formId]="formId" [columns]="getColumnLabelValue()" ></app-table-column-config>
</div>
<div class="mat-elevation-z8">
<div class="table-container">
    <table mat-table [dataSource]="dataSource">

        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> {{columnList['id']|translate}} </th>
            <td mat-cell *matCellDef="let row">
                <app-copy-field [inputValue]="row.id"></app-copy-field>
            </td>
        </ng-container>

        <ng-container matColumnDef="description">
            <th mat-header-cell *matHeaderCellDef> {{columnList['description']|translate}} </th>
            <td mat-cell *matCellDef="let row">
                <app-editable-field [inputValue]="row.description"
                    (newValue)="doPatch(row.id,$event,'description')">
                </app-editable-field>
            </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> {{columnList['name']|translate}} </th>
            <td mat-cell *matCellDef="let row">
                <app-editable-field [inputValue]="row.name" (newValue)="doPatch(row.id,$event,'name')">
                </app-editable-field>
            </td>
        </ng-container>
        <ng-container matColumnDef="origin">
            <th mat-header-cell *matHeaderCellDef> {{columnList['origin']|translate}} </th>
            <td mat-cell *matCellDef="let row">
                <ng-container *ngIf="row.allowOrigin.length>1">
                    <mat-chip-list aria-label="chip list selection">
                        <mat-chip >
                            {{row.allowOrigin[0]}}
                        </mat-chip>
                        <mat-chip [matMenuTriggerFor]="more">
                            +{{(row.allowOrigin.length-1)}} {{'MORE'|translate}}
                        </mat-chip>
                        <mat-menu #more="matMenu">
                            <ng-template matMenuContent>
                                <div  style="display: flex;flex-direction: column;padding: 8px;">
                                    <mat-chip *ngFor="let e of removeFirst(row.allowOrigin)" mat-menu-item style="margin-bottom:8px">
                                        {{e}}
                                    </mat-chip>
                                </div>
                            </ng-template>
                        </mat-menu>
                    </mat-chip-list>
                </ng-container>
                <ng-container *ngIf="row.allowOrigin.length<=1">
                    <mat-chip-list aria-label="chip list selection">
                        <mat-chip *ngFor="let e of row.allowOrigin">
                            {{e}}
                        </mat-chip>
                    </mat-chip-list>
                </ng-container>
            </td>
        </ng-container>

        <ng-container matColumnDef="edit">
            <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['edit']|translate}}</th>
            <td mat-cell *matCellDef="let row" class="table-icon">
                <mat-icon (click)="openBottomSheet(row.id)" [color]="'primary'">edit</mat-icon>
            </td>
        </ng-container>
        <ng-container matColumnDef="clone">
            <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['clone']|translate}}</th>
            <td mat-cell *matCellDef="let row" class="table-icon" style="padding-right: 14px !important; ">
                <mat-icon (click)="doClone(row.id)" [color]="'primary'">file_copy</mat-icon>
            </td>
        </ng-container>
        <ng-container matColumnDef="delete">
            <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['delete']|translate}}</th>
            <td mat-cell *matCellDef="let row" class="table-icon">
                <mat-icon (click)="doDeleteById(row.id)" [color]="'warn'">delete_outline</mat-icon>
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns();"></tr>
    </table>
</div>

<mat-paginator [showFirstLastButtons]="true" [length]="totoalItemCount" [pageIndex]="entitySvc.pageNumber"
    [pageSize]="pageSize" (page)="pageHandler($event)">
</mat-paginator>
</div>